<template>
    <div class="home">
        <el-button type="primary" size="small">首页</el-button>
        <el-row>
            <el-col :span="8">
                <div class="peo-info">
                    <el-card class="box-card">
                        <div class="message">
                            <div class="pic">
                                <img src="../assets/head.jpg" alt="">
                            </div>
                            <div class="user">
                                <h3 class="admin">Admin</h3>
                                <div class="beizhu">超级管理员</div>
                            </div>
                        </div>
                        <div class="login-time">
                            <el-row>
                                <el-col :span="8" class="time-title">
                                    上次登录时间：
                                </el-col>
                                <el-col :span="16" class="time-content">
                                    2021-7-19
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="8" class="time-title">
                                    上次登录地点：
                                </el-col>
                                <el-col :span="16" class="time-content">
                                    武汉
                                </el-col>
                            </el-row>
                        </div>
                    </el-card>
                    <el-card class="tabledata">
                        <el-table :data="tableData" style="width: 100%">
                            <el-table-column prop="name" label="课程">
                            </el-table-column>
                            <el-table-column prop="todayBuy" label="今日购买">
                            </el-table-column>
                            <el-table-column prop="monthBuy" label="本月购买">
                            </el-table-column>
                            <el-table-column prop="totalBuy" label="总购买">
                            </el-table-column>
                        </el-table>
                    </el-card>
                </div>
            </el-col>
            <el-col :span="16">
                <div class="order-data">
                    <el-card v-for="item in countData" :id="item.name" class="order-item"
                        :body-style="{ padding: '0px', display: 'flex', alignItems: 'center' }">
                        <div class="icon" :class="`el-icon-${item.icon}`" :style="{ background: item.color }">
                        </div>
                        <div class="content">
                            <div class="money">￥{{ item.value }}</div>
                            <div class="pay">{{ item.name }}</div>
                        </div>
                    </el-card>
                </div>
                <div class="pic-zxt" style="height: 280px;">
                    <div class="pro-pic" ref="proPic"></div>
                </div>
                <div class="other" style="height: 300px;">
                    <div class="zzt" ref="zztPic">1</div>
                    <div class="bzt" ref="bztPic">1</div>
                </div>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import * as echarts from 'echarts';
import { getdata } from '../api/index'
export default {
    data() {
        return {
            tableData: [],
            countData: []
        }
    },
    mounted() {
        // 获取mock模拟数据
        var that = this
        getdata().then((data) => {
            that.tableData = data.tableData
            that.countData = data.countData
            // 画折线图
            that.canvasZxt(data);
            // 画柱状图
            that.canvasZzt(data);
            // 画饼状图
            that.canvasBzt(data);
        })
    },
    methods: {
         // 画折线图
        canvasZxt(data) {
            // 画折线图
            var zxtMyChart = echarts.init(this.$refs.proPic);
            // 整合数据
            var keys = Object.keys(data.orderData.data[0])
            var series = []
            keys.forEach((val) => {
                series.push({
                    name: val,
                    type: 'line',
                    data: data.orderData.data.map(item => item[val])
                })
            })
            zxtMyChart.setOption({
                title: {
                    text: 'ECharts入门示例'
                },
                tooltip: {

                },
                legend: {
                    data: keys
                },
                xAxis: {
                    data: data.orderData.date
                },
                yAxis: {
                    name: '销量'
                },
                series
            });
        },
         // 画柱状图
        canvasZzt(data) {
            var zztMyChart = echarts.init(this.$refs.zztPic);
            zztMyChart.setOption({
                title: {
                    text: 'userData数据'
                },
                legend: {
                },
                tooltip: {

                },
                xAxis: {
                    data: data.userData.map(item => item.date)
                },
                yAxis: {
                },
                series: [{
                    name: 'new',
                    type: 'bar',
                    data: data.userData.map(item => item.new)
                }, {
                    name: 'active',
                    type: 'bar',
                    data: data.userData.map(item => item.active)
                }],
                color: '#ccc'
            })
        },
        // 画饼状图
        canvasBzt(data) {
            var bztMyChart = echarts.init(this.$refs.bztPic);
            bztMyChart.setOption({
                title: {
                    text: 'videoData数据',
                    textStyle: { width: '100%' }
                },
                legend: {
                    top: 30
                },
                tooltip: {

                },
                series: [{
                    type: 'pie',
                    data: data.videoData,
                    top: 50
                }],
            })
        }
    }
}
</script>

<style scoped lang="less">
.home {
    .text {
        font-size: 14px;
    }

    .item {
        padding: 18px 0;
    }

    .peo-info {
        margin-right: 20px;

        .box-card {
            box-sizing: border-box;

            .message {
                display: flex;
                align-items: center;
                padding-bottom: 20px;
                border-bottom: 1px solid #ccc;

                .pic {
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    overflow: hidden;

                    img {
                        width: 100%;
                        height: 100%;
                        object-fit: cover;
                    }
                }

                .user {
                    margin-left: 25px;
                    flex: 1;

                    .admin {
                        font-size: 22px;
                        font-weight: bold;
                        margin-bottom: 4px;
                    }

                    .beizhu {
                        color: #aaa;
                        font-size: 14px;
                    }
                }
            }

            .login-time {
                margin-top: 10px;
                font-size: 14px;

                .el-row {
                    line-height: 26px;
                }

                .time-title {
                    color: #aaa;
                }

                .time-content {
                    color: #555;
                }
            }
        }

        .tabledata {
            margin-top: 20px;
        }
    }

    .order-data {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;

        .order-item {
            width: 32%;
            margin-bottom: 15px;
            border: none;

            .icon {
                float: left;
                width: 80px;
                height: 80px;
                font-size: 30px;
                line-height: 80px;
                text-align: center;
                color: #fff;
            }

            .content {
                padding-left: 8px;

                .money {
                    font-size: 26px;
                }

                .pay {
                    margin-top: 1px;
                    font-size: 12px;
                    color: #aaa;
                }
            }
        }
    }

    .pic-zxt {
        .pro-pic {
            height: 100%;
        }
    }

    .other {
        display: flex;
        justify-content: space-between;

        .bzt,
        .zzt {
            width: 48%;
            height: 100%;
        }
    }
}

.el-button--small {
    padding: 8px;
    font-size: 14px;
}
</style>